import { defuatColor } from '../../shared/style';
import {
  ButtonConfig,
  Selector,
  TypeConifg,
  SizeConifg,
  useDefualtSzie,
} from './config';

const createStyles = (
  type?: TypeConifg,
  size?: SizeConifg,
  disabled?: string,
) => {
  let styles = `
    :host .${Selector} {
          width: var(--button-width, ${useDefualtSzie(size).width});
          height:var(--button-height, ${useDefualtSzie(size).height});
          border-radius: var(--button-border-radius,${
            useDefualtSzie(size).borderRadius
          });
          background: var(--button-background, ${defuatColor.blue});
          color: var(--button-color, #fff);
          font-size: var(--button-font-size, ${useDefualtSzie(size).fontSize});
          font-weight: var(--button-font-weight, 300);
          line-height: var(--button-line-height, ${
            useDefualtSzie(size).lineHeight
          });
          text-align: center;
          cursor: pointer;
          border: none;
    }
   `;
  if (type) {
    styles += `
    :host([type="${type}"]) .${Selector} {
        background: var(--button-background-${type}, ${defuatColor[type]});
    }
    `;
  }
  if (disabled === '' || disabled === 'true') {
    styles += `
    :host([disabled]) .${Selector}{ 
      cursor: not-allowed; 
      pointer-events: all; 
      border: 1px solid #D6D6D6;ß
      color: #ABABAB;
      background-color: #EEE;
    }
    `;
  }
  return styles;
};
export default function renderTemplate(config: ButtonConfig) {
  const { type, size, disabled, part } = config;
  const styles = createStyles(type, size, disabled);
  let template = '';
  if (part) {
    template += `<style>${styles}</style>
    <button class="${Selector}" part="${part}">
    <slot></slot>
    </button>`;
  } else {
    template += `<style>${styles}</style>
    <button class="${Selector}">
    <slot></slot>
    </button>`;
  }
  return template;
}
